<template>
  <div>
    <v-nav :current="4" @changelang="changelang" :isEnShow="isEnShow" :isChShow="isChShow"></v-nav>
    <img src="@/components/canping.png" alt="" style="width: 100%">
    <h1>{{listData.post_title}}</h1>
    <div class="img-div">
      <img :src="listData.src" alt="">
    </div>
    <div class="brief">
      <p><span>【{{productIntroduce[0]}}】</span>{{listData.post_title}}</p>
      <p v-if="!!listData.post_product_name"><span>【{{productIntroduce[1]}}】</span>{{listData.post_product_name}}</p>
      <p><span>【{{productIntroduce[2]}}】</span>{{listData.post_product_info}}</p>
      <p><span>【{{productIntroduce[3]}}】</span>{{listData.post_product_type}}</p>
      <p><span>【{{productIntroduce[4]}}】</span>{{listData.post_product_kind}}</p>
      <p><span>【{{productIntroduce[5]}}】</span>{{listData.post_product_spec}}</p>
      <p><span>【{{productIntroduce[6]}}】</span>{{listData.post_num}}</p>
      <p><span>【{{productIntroduce[7]}}】</span>{{listData.post_bzq}}</p>
      <!-- <p><span>【{{productIntroduce[8]}}】</span>{{listData.post_phone}}</p> -->
      <div>
        <p><span>【{{productIntroduce[9]}}】</span></p>
        <p v-html="listData.post_zhize"></p>
      </div>
      <div>
        <p><span>【{{productIntroduce[10]}}】</span></p>
        <p v-html="listData.post_excerpt"></p>
      </div>
      <P style="color: #dc2d2d;font-size: 14px;padding: .4rem">{{productIntroduce[11]}}</P>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import vNav from '@/components/nav/nav'
import vFooter from '@/components/footer'
import { getProductInfoData } from '@/services/api.js'
import { getProductInfoDataEn } from '@/services/api_en.js'
export default {
  data () {
    return {
      listData: []
    }
  },
  props: {
  },
  components: {
    vNav,
    vFooter
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'productIntroduce': 'productIntroduce'
    })
  },
  methods: {
    _getChList () {
      let params = {
        id: this.id
      }
      getProductInfoData(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    _getEnList () {
      let params = {
        id: this.id
      }
      getProductInfoDataEn(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isEnShow = false
        this.isChShow = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isEnShow = true
        this.isChShow = false
      }
    },
    changelang (res) {
      console.log('爽肤水' + res)
      if (res === 1) {
        this._getChList()
      }
      if (res === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../util/common.scss';
  h1 {
    padding: 36rem/$font-size-base 0;
    font-size: 30rem/$font-size-base;
    letter-spacing: 1px;
    color: #333;
    font-weight: bolder;
    text-align: center;
  }
  .img-div {
    width: 670rem/$font-size-base;;
    height: 422rem/$font-size-base;;
    background-color: #fff;
    border: solid 1px #cccccc;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 535rem/$font-size-base;;
      height: 370rem/$font-size-base;;
    }
  }
  .brief {
    margin-top: 40rem/$font-size-base;
    p {
      padding: 0 .4rem;
      font-size: 26rem/$font-size-base;
      line-height: 42rem/$font-size-base;
      letter-spacing: 1px;
      color: #333333;
      word-wrap:break-word;
      span {
        font-weight: bolder;
      }
    }
    h3 {
      font-size: 24rem/$font-size-base;
      letter-spacing: 1px;
      color: #f92425;
      padding-top: 71rem/$font-size-base;;
      padding-bottom: 49rem/$font-size-base;
      text-align: right;
      padding-right: 30rem/$font-size-base;
    }
  }
</style>
